const catsOf = (p) => p.category.split(',').map((c) => c.trim()); function FilterChip({ label, active, onClick, dark }) { const [h, setH] = React.useState(false); return ( ); } /* Thumbnail version of the hero joke: the queue, the box, the four survivors, scaled down to a card plate. Props are dropped at this size - they would read as specks - but the size difference still tells the story. */ function HeroMini({ gradient, hover }) { return (
{[0, 1, 2, 3].map((i) => (
))}
{[0, 1, 2].map((i) => )}
{[0, 1, 2, 3].map((i) => (
))}
); } function FeaturedPost({ post, t, href, onOpen, dark }) { const [h, setH] = React.useState(false); const { Icon } = window.SevcikMarketingDesignSystem_3203fa; return ( { ev.preventDefault(); onOpen(); }} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)} className="sm-blog-row" style={{ display: 'grid', gridTemplateColumns: '120px 148px minmax(0, 1fr) auto', alignItems: 'center', gap: 24, textDecoration: 'none', padding: '20px 24px', cursor: 'pointer', borderBottom: `1.5px solid ${dark ? 'var(--border-hairline-dark)' : 'var(--gray-200)'}`, backgroundColor: h ? (dark ? 'rgba(255,255,255,0.06)' : 'var(--gray-150)') : 'transparent', transition: 'background-color .25s ease', }}>
{t.latestBadge} {post.date.replace(/,\s*\d{4}$/, '')}

{post.title}

{post.category}
{post.read}
); } function PostRow({ post, t, href, onOpen, last, dark }) { const [h, setH] = React.useState(false); const { Icon } = window.SevcikMarketingDesignSystem_3203fa; return ( { e.preventDefault(); onOpen(); }} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)} className="sm-blog-row" style={{ display: 'grid', gridTemplateColumns: '120px 148px minmax(0, 1fr) auto', alignItems: 'center', gap: 24, textDecoration: 'none', padding: '20px 24px', cursor: 'pointer', borderBottom: last ? 'none' : `1.5px solid ${dark ? 'var(--border-hairline-dark)' : 'var(--gray-200)'}`, backgroundColor: h ? (dark ? 'rgba(255,255,255,0.06)' : 'var(--gray-150)') : 'transparent', transition: 'background-color .25s ease', }}>
{post.date.replace(/,\s*\d{4}$/, '')}

{post.title}

{post.category}
{post.read}
); } function BlogListing({ s, t, onBack, onOpenArticle }) { const theme = useReaderTheme(); const { dark, C } = theme; const [cat, setCat] = React.useState(s.cats[0]); const list = cat === s.cats[0] ? s.posts : s.posts.filter((p) => catsOf(p).includes(cat)); const [featured, ...rest] = list; const hrefOf = (p) => routeHref({ lang: s.htmlLang, screen: 'blog', slug: p.slug }); return ( {s.posts.length > 0 && (
{s.cats.filter((c) => c === s.cats[0] || s.posts.some((p) => catsOf(p).includes(c))).map((c) => setCat(c)} dark={dark} />)}
)}
{s.posts.length === 0 && } {featured && onOpenArticle(featured)} dark={dark} />} {rest.map((p, i) => onOpenArticle(p)} last={i === rest.length - 1} dark={dark} />)}
); } /* Article body blocks. Beyond paragraphs the pieces need lists, a stat callout and the team-shape figure - all drawn from tokens so they follow the reader's light/dark choice. *word* renders as emphasis. */ function Em({ text }) { const parts = String(text).split(/\*([^*]+)\*/); return <>{parts.map((s, i) => (i % 2 ? {s} : s))}; } function ArticleList({ items, C }) { return (
    {items.map((it, i) => (
    • ))}
); } function StatCallout({ value, label, C }) { return (
{value}
{label}
); } /* Team shape: the pyramid that folds into four roles. Left column is stacked blocks (one lead, three specialists, eight juniors), right column is four named plates plus a dashed row for the software that replaced the base. */ function TeamShape({ data, C, dark }) { const cell = (h, bg, key) =>
; const faint = dark ? 'rgba(255,255,255,0.16)' : 'var(--gray-200)'; const mid = dark ? 'rgba(255,255,255,0.32)' : 'var(--gray-300)'; const lab = { fontFamily: 'var(--font-mono)', fontWeight: 500, fontSize: 9.5, letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase', color: C.meta }; return (
{data.thenLabel}
{cell(26, mid, 'l')}
{[0, 1, 2].map((i) => cell(20, mid, 's' + i))}
{[0, 1, 2, 3, 4, 5, 6, 7].map((i) => cell(14, faint, 'j' + i))}
{data.nowLabel}
{data.roles.map((r, i) => (
))}
{data.caption}
); } /* Author box and newsletter sign-up, the two things that sit under a finished article. The newsletter has no backend yet, so a submit hands the address to the mail client and says so plainly - no fake success state. */ function AuthorAvatar({ size, alt }) { const stripe = Math.round(size * 0.17); return ( {alt} ); } function AuthorBox({ s, t, C, dark, onAll }) { return (
{t.authorLabel}
{s.siteName}
{t.authorRole}

{t.authorBio}

{t.authorLinkedin}
); } function NewsletterBox({ t, C, dark }) { const [sent, setSent] = React.useState(false); const submit = (e) => { e.preventDefault(); const mail = (new FormData(e.currentTarget).get('email') || '').toString().trim(); if (!mail) return; setSent(true); window.location.href = `mailto:${CONTACT.email}?subject=${encodeURIComponent('Newsletter')}&body=${encodeURIComponent(mail)}`; }; const field = { flex: 1, minWidth: 200, minHeight: 48, padding: '0 18px', borderRadius: 999, border: `1.5px solid ${C.rule}`, background: dark ? 'rgba(255,255,255,0.05)' : 'var(--white)', fontFamily: 'var(--font-body)', fontSize: 15.5, color: C.heading, outline: 'none' }; return (
{t.newsletterLabel}

{t.newsletterTitle}

{t.newsletterNote}

{sent ? (

{t.newsletterDone}

) : (
)}

{t.newsletterSmall}

); } /* Article hero: a small joke rather than a stock plate. Twelve identical figures queue on the left, a humming grey box swallows the middle of them, and four survivors stand on the right holding the props of their new jobs - a NO sign, a red pen, a spanner and an oversized ear. Built from circles and rounded rectangles so it stays in the brand's flat vocabulary. */ function Figure({ scale = 1, opacity = 1, delay = 0, bob = false, prop = null }) { const w = 14 * scale; return (
{prop}
); } function ArticleHero({ post }) { const ink = 'var(--white)'; const props = [ /* NO sign */
, /* red pen, held up */
, /* spanner */
, /* oversized ear */
, ]; return (
{/* the queue */}
{[0, 1, 2, 3, 4, 5, 6, 7].map((i) => (
))}
{/* the box that hums */}
{[0, 1, 2].map((i) => ( ))}
{/* the survivors */}
{props.map((pr, i) => (
))}
); } function ArticleReader({ s, t, post, onBack, onOpenArticle }) { const { Icon } = window.SevcikMarketingDesignSystem_3203fa; const p = post || s.posts[0]; const [shown, setShown] = React.useState(false); const [progress, setProgress] = React.useState(0); const [backHover, setBackHover] = React.useState(false); /* Reader theme is shared with the hub and case studies via useReaderTheme. */ const theme = useReaderTheme(); const { dark, C } = theme; const flipDark = theme.flip; const scroller = React.useRef(null); const idx = s.posts.findIndex((x) => x.id === p.id); const next = s.posts[(idx + 1) % s.posts.length]; React.useEffect(() => { const id = requestAnimationFrame(() => setShown(true)); const to = setTimeout(() => setShown(true), 60); const onKey = (e) => { if (e.key === 'Escape') onBack(); }; window.addEventListener('keydown', onKey); const prev = document.documentElement.style.overflow; document.documentElement.style.overflow = 'hidden'; return () => { cancelAnimationFrame(id); clearTimeout(to); window.removeEventListener('keydown', onKey); document.documentElement.style.overflow = prev; }; }, [onBack]); React.useEffect(() => { if (scroller.current) scroller.current.scrollTop = 0; setProgress(0); }, [p.id]); const onScroll = (e) => { const el = e.currentTarget; const max = el.scrollHeight - el.clientHeight; setProgress(max > 0 ? Math.min(1, el.scrollTop / max) : 0); }; const body = { margin: 0, fontFamily: 'var(--font-body)', fontSize: 19, lineHeight: 1.75, color: C.body }; const h2 = { margin: '16px 0 -8px', fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 30, lineHeight: 1.2, letterSpacing: '-0.015em', color: C.heading }; return (
{p.read} {t.read}
{p.category} · {p.date}

{p.title}

{p.standfirst}

{s.siteName}
{t.authorRole}
{(p.blocks || []).map((bl, i) => ( bl.k === 'h' ?

{bl.t}

: bl.k === 'q' ?
: bl.k === 'ul' ? : bl.k === 'stat' ? : bl.k === 'fig' ? :

))}
{next && next.id !== p.id && (
{t.readNext}
onOpenArticle(next)} last dark={dark} />
)}
); } Object.assign(window, { BlogListing, ArticleReader, PostRow, FeaturedPost });